import 'package:flutter/material.dart';
import 'package:hello_flutter/base/index.dart';
import 'package:hello_flutter/widgets/sliver_header_delegate.dart';

class CustomScrollViewAndSliversWidget extends BasePage {
  const CustomScrollViewAndSliversWidget({super.key});

  @override
  String getPageTitle() => 'CustomScrollView 和 Slivers';

  @override
  Widget buildBody(BuildContext context) {
    return Center(
      child: Column(
        children: [
          ElevatedButton(
              onPressed: () => Navigator.of(context).pushNamed(
                  '/scrollable/custom_scroll_view_and_slivers/CustomScrollView'),
              child: const Text('CustomScrollView')),
          ElevatedButton(
              onPressed: () => Navigator.of(context).pushNamed(
                  '/scrollable/custom_scroll_view_and_slivers/Slivers'),
              child: const Text('Slivers')),
          ElevatedButton(
              onPressed: () => Navigator.of(context).pushNamed(
                  '/scrollable/custom_scroll_view_and_slivers/SliverToBoxAdapter'),
              child: const Text('SliverToBoxAdapter')),
          ElevatedButton(
              onPressed: () => Navigator.of(context).pushNamed(
                  '/scrollable/custom_scroll_view_and_slivers/SliverPersistentHeader'),
              child: const Text('SliverPersistentHeader')),
        ],
      ),
    );
  }
}

class CustomScrollViewWidget extends BasePage {
  const CustomScrollViewWidget({super.key});

  final bool custom = true;

  @override
  String getPageTitle() => 'CustomScrollView';

  @override
  Widget buildBody(BuildContext context) {
    return custom ? buildTwoSliverListView() : buildTwoListView();
  }

  Widget buildTwoListView() {
    var listView = ListView.builder(
        itemCount: 20,
        itemBuilder: (_, index) => ListTile(
              title: Text('$index'),
            ));

    return Column(
      children: [
        Expanded(child: listView),
        const Divider(),
        Expanded(child: listView),
      ],
    );
  }

  Widget buildTwoSliverListView() {
    var listView = SliverFixedExtentList(
      itemExtent: 56,
      delegate: SliverChildBuilderDelegate(
        childCount: 20,
        (_, index) => ListTile(
          title: Text('$index'),
        ),
      ),
    );

    return CustomScrollView(
      slivers: [
        listView,
        const SliverToBoxAdapter(
          child: Divider(),
        ),
        listView,
      ],
    );
  }
}

class SliversWidget extends BasePage {
  const SliversWidget({super.key});

  @override
  String getPageTitle() => 'Slivers';

  @override
  Widget buildBody(BuildContext context) {
    return Material(
      child: CustomScrollView(
        slivers: [
          SliverAppBar(
            pinned: true,
            expandedHeight: 250,
            flexibleSpace: FlexibleSpaceBar(
              title: const Text(
                'Slivers',
                style: TextStyle(color: Colors.white),
              ),
              centerTitle: false,
              background: Image.asset(
                'assets/images/logo.png',
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverPadding(
            padding: const EdgeInsets.all(8),
            sliver: SliverGrid(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                mainAxisSpacing: 10,
                crossAxisSpacing: 10,
                childAspectRatio: 4,
              ),
              delegate: SliverChildBuilderDelegate(
                childCount: 20,
                (context, index) {
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.cyan[100 * (index % 9)],
                    child: Text('grid item $index'),
                  );
                },
              ),
            ),
          ),
          SliverFixedExtentList(
            itemExtent: 50,
            delegate: SliverChildBuilderDelegate(
              childCount: 20,
              (context, index) {
                return Container(
                  alignment: Alignment.center,
                  color: Colors.lightBlue[100 * (index % 9)],
                  child: Text('list item $index'),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

class SliverToBoxAdapterWidget extends BasePage {
  const SliverToBoxAdapterWidget({super.key});

  @override
  String getPageTitle() => 'SliverToBoxAdapter';

  @override
  Widget buildBody(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverToBoxAdapter(
          child: SizedBox(
            height: 300,
            child: PageView(
              scrollDirection: Axis.horizontal,
              children: const [
                Center(
                  child: Text(
                    '1',
                    textScaler: TextScaler.linear(5),
                  ),
                ),
                Center(
                  child: Text(
                    '2',
                    textScaler: TextScaler.linear(5),
                  ),
                ),
              ],
            ),
          ),
        ),
        const SliverToBoxAdapter(
          child: Divider(),
        ),
        buildSliverPrototypeList(),
      ],
    );
  }
}

Widget buildSliverPrototypeList() {
  return SliverPrototypeExtentList(
    prototypeItem: const ListTile(
      title: Text('1'),
    ),
    delegate: SliverChildBuilderDelegate(
      childCount: 20,
      (_, index) {
        return ListTile(
          title: Text('list item $index'),
          tileColor: Colors.lightBlue[100 * (index % 9)],
        );
      },
    ),
  );
}

class SliverPersistentHeaderWidget extends BasePage {
  const SliverPersistentHeaderWidget({super.key});

  @override
  String getPageTitle() => 'SliverPersistentHeader';

  @override
  Widget buildBody(BuildContext context) {
    return CustomScrollView(
      slivers: [
        buildSliverPrototypeList(),
        SliverPersistentHeader(
          pinned: false,
          floating: true,
          delegate: SliverHeaderDelegate(
            maxHeight: 80,
            minHeight: 50,
            child: buildHeader(1),
          ),
        ),
        buildSliverPrototypeList(),
        SliverPersistentHeader(
          pinned: true,
          delegate: SliverHeaderDelegate.fixedHeight(
            height: 50,
            child: buildHeader(2),
          ),
        ),
        buildSliverPrototypeList(),
        SliverPersistentHeader(
          pinned: true,
          delegate: SliverHeaderDelegate.fixedHeight(
            height: 50,
            child: buildHeader(3),
          ),
        ),
        buildSliverPrototypeList(),
      ],
    );
  }

  Widget buildHeader(int i) {
    return Container(
      color: Colors.purple[200],
      alignment: Alignment.centerLeft,
      child: Text('PersistentHeader $i'),
    );
  }
}
